


WhatsApp Skin

by Azdaema Codes (Azdaema)



Series: Azdaema's AO3 Messaging Skins [3]
Category: AO3 fandom, No Fandom
Genre: Ao3 skins, Fanwork Research & Reference Guides, Metafiction, Work Skin
Language: English
Status: In-Progress
Published: 2020-05-19
Updated: 2020-05-19
Packaged: 2021-03-02 21:13:41
Rating: Teen And Up Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 4
Words: 700
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/24273361
Author URL: https://archiveofourown.org/users/Azdaema/pseuds/Azdaema%20Codes
Summary: Got a fic where characters message each other?
Relationships: AO3 Skins & You
Series: Azdaema's AO3 Messaging Skins [3]
Series URL: https://archiveofourown.org/series/1642099
Kudos: 9





	1. Basics

**Author's Note:**

  * Inspired by [How to Make WhatsApp Chat on AO3](https://archiveofourown.org/works/15842043) by [ran_a_dom (revabhipraya)](https://archiveofourown.org/users/revabhipraya/pseuds/ran_a_dom). 
  * Inspired by [Pure CSS WhatsApp Desktop Speech Bubble](https://archiveofourown.org/external_works/622519) by Benni. 
  * Inspired by [WhatsApp in Pure CSS and JS](https://archiveofourown.org/external_works/622522) by Rumbiiha swaibu. 


    
    
    /* wrapper */
    .whatsapp {
    	width: 100%;
    	max-width: 320px;
    	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    	display: table;
    	margin: auto;
    	padding-top: 1em;
    	background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/WhatsApp_background.png");
    	background-repeat: repeat-y;
    	background-size: 100%;
    }
    
    /* characters's names hidden */
    .whatsapp dt {
    	display: none;
    }
    
    /**************************************************
    *		Texts
    **************************************************/
    .whatsapp dd {
    	max-width: 65%;
    	clear: both;
    	position: relative;
    	color: #000000;
    	line-height: 1.25em;
    	border-radius: 5px;
    	padding: 2px 5px;
    	margin: 1px 15px;
    	border-bottom: 1px solid rgba(0,0,0, 0.2);
    	z-index: 1;
    }
    .whatsapp dd:last-child {
    	margin-bottom: 10px;
    }
    .whatsapp dd:last-of-type:after {
    	content: "";
    	position: absolute;
    	width: 25px;
    	height: 16px;
    	bottom: 4px;
    	border-top: 9px solid;
    	border-radius: 100%;
    	clip: rect(0px,16px,16px,0px);
    	z-index: -1;
    }
    
    /* Outgoing texts */
    .whatsapp .out dd {
    	float: right;
    	background: #DCF8C6;
    }
    .whatsapp .out dd:last-of-type:after {
    	border-color: #DCF8C6;
    	transform: rotate(240deg);
    	right: -16px;
    }
    
    /* Incoming texts */
    .whatsapp .in dd {
    	float: left;
    	background: #FFFFFF;
    }
    .whatsapp .in dd:last-of-type:after {
    	border-color: #FFFFFF;
    	transform: scaleX(-1) rotate(240deg);
    	left: -16px;
    }

### Demo
    
    
    <dl class="whatsapp">
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside</dd>
    <dd>wait I can see you now</dd>
    </div>
    
    </dl>

Alice
    are you there yet?
    Where are you?

Bob
    I'm waiting outside
    wait I can see you now


	2. Timestamps

### Skin
    
    
    .whatsapp .day,
    .whatsapp dd sub {
    	font-family: inherit;
    	font-size: 0.75em;
    	color: #999;
    	text-transform: uppercase;
    }
    
    .whatsapp .day {
    	width: 100px;
    	background: #D4EAF4;
    	border-radius: 5px;
    	padding: 5px;
    	margin: 10px auto;
    	text-align: center;
    	display: table;
    }
    
    .whatsapp dd sub {
    	display: inline-block;
    	float: right;
    	line-height: 1.3em;
    	padding-top: 0.5em;
    	padding-left: 1.5em;
    	margin: 0;
    }
    
    /* checkmarks */
    .whatsapp .out dd sub:after {
    	content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_read.png");
    	margin-left: 3px;
    }
    .whatsapp .out dd sub.received:after {
    	content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_received.png");
    }
    .whatsapp .out dd sub.notreceived:after {
    	content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_no-received.png");
    }

### Demo
    
    
    <dl class="whatsapp">
    
    <h4 class="day">Today</h4>
    
    <div class="out">
    <dt>Bob</dt>
    <dd>Leaving now<sub>3:48 PM</sub></dd>
    </div>
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?<sub>4:12 PM</sub></dd>
    <dd>Where are you?<sub>4:12 PM</sub></dd>
    </div>
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside<sub class="received">4:15 PM</sub></dd>
    <dd>wait I can see you now<sub class="notreceived">4:16 PM</sub></dd>
    </div>
    
    </dl>

#### Today

Bob
    Leaving now3:48 PM

Alice
    are you there yet?4:12 PM
    Where are you?4:12 PM

Bob
    I'm waiting outside4:15 PM
    wait I can see you now4:16 PM


	3. Emojis

### Skin
    
    
    .whatsapp dd.emoji1 {font-size: 2.5em;}
    .whatsapp dd.emoji2 {font-size: 2em;}
    .whatsapp dd.emoji3 {font-size: 1.5em;}
    
    .whatsapp dd.emoji1 sub,
    .whatsapp dd.emoji2 sub,
    .whatsapp dd.emoji3 sub {
    	display: block;
    	float: none;
    	text-align: right;
    	padding: 0 !important;
    }
    
    .whatsapp dd.emoji1 sub {font-size: 0.3em;}
    .whatsapp dd.emoji2 sub {font-size: 0.375em;}
    .whatsapp dd.emoji3 sub {font-size: 0.5em;}

### Demo
    
    
    <dl class="whatsapp">
    
    <div class="in">
      <dt>Alice</dt>
      <dd class="emoji1">💖<sub>4:16 PM</sub></dd>
      <dd class="emoji2">💖💖<sub>4:16 PM</sub></dd>
      <dd class="emoji3">💖💖💖<sub>4:16 PM</sub></dd>
      <dd>💖💖💖💖<sub>4:16 PM</sub></dd>
    </div>
    
    </dl>

Alice
    💖4:16 PM
    💖💖4:16 PM
    💖💖💖4:16 PM
    💖💖💖💖4:16 PM


	4. Photos

### Skin
    
    
    .whatsapp .pic {
    	padding: 3px;
    }
    .whatsapp .pic img {
    	border-radius: 3px;
    	width: 100%;
    	display: block;
    }
    /* Timestamp white and in image corner */
    .whatsapp .pic.solo sub {
    	color: #ffffff;
    	position: absolute;
    	bottom: 2px;
    	right: 5px;
    }

### Demo

If you're sending a picture + text, it's like this:
    
    
    <dl class="whatsapp">
    <div class="out">
    <dt>Aulus Agerius</dt>
    <dd class="pic"><img src="https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/gladius.jpg" />Should I buy you one?<sub>4:16 PM</sub></dd>
    </div>
    </dl>

Aulus Agerius
     Should I buy you one? 4:16 PM

If you're just sending a picture, it's like this:
    
    
    <dl class="whatsapp">
    <div class="out">
    <dt>Aulus Agerius</dt>
    <dd class="pic solo"><img src="https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/gladius.jpg" /><sub>4:16 PM</sub></dd>
    </div>
    </dl>

Aulus Agerius
     4:16 PM


End file.
